﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <%@include file="common/manage-head.jsp" %>

</head>

<body>
<div id="wrapper">

    <%@include file="common/manage-header.jsp" %>

    <div id="page-wrapper">
        <div id="page-inner">

            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        Article Category Manage
                        <small>文章分类管理</small>
                    </h1>
                </div>
            </div>
            <!-- /. ROW  -->
            <c:choose>
                <c:when test="${empty pageInfo.list}">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <button type="button" class="btn btn-primary" onclick="window.location.href='javascript:history.go(-1)'">已经没有分类了，返回</button>
                    </div>
                </div>
                </c:when>
                <c:otherwise>
                    <div class="row">
                        <div class="col-md-12">

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <button type="button" class="btn btn-primary" onclick="addArticleCategoryFun()" data-toggle="modal" data-target="#addArticleCategoryModal">新增分类</button>
                                </div>
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover"
                                               id="dataTables-example">
                                            <thead>
                                            <tr>
                                                <th>标题</th>
                                                <th>图标</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <c:forEach items="${pageInfo.list}" var="articleCategory">
                                                <tr class="odd gradeX">
                                                    <td>${articleCategory.articleCategoryTitle}</td>
                                                    <td><span class="${articleCategory.articleCategoryIcon}"></span>
                                                    </td>
                                                    <td>
                                                        <c:choose>
                                                            <c:when test="${articleCategory.articleCategoryState == 0}">
                                                                <div class="text-success">显示</div>
                                                            </c:when>
                                                            <c:when test="${articleCategory.articleCategoryState == 1}">
                                                                <div class="text-warning">禁用</div>
                                                            </c:when>
                                                        </c:choose>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-success"
                                                                onclick="articleCategoryFun('${articleCategory.articleCategoryId}')"
                                                                data-toggle="modal" data-target="#articleCategoryModal">
                                                            查看
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-info"
                                                                onclick="window.location.href='/articleCategoryManage/articleCategorySecond?articleCategoryId=${articleCategory.articleCategoryId}'">
                                                            子分类
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-danger">删除</button>
                                                    </td>
                                                </tr>
                                            </c:forEach>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- 分页信息 -->
                    <div class="row text-center">
                        当前第：${pageInfo.pageNum }页，总共：${pageInfo.pages }页，总共：${pageInfo.total }条记录
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li><a href="/articleCategoryManage/articleCategoryListByFirst?pn=1">首页</a></li>
                                <c:if test="${pageInfo.hasPreviousPage }">
                                    <li>
                                        <a href="/articleCategoryManage/articleCategoryListByFirst?pn=${pageInfo.pageNum-1 }"
                                           aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                </c:if>

                                <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                                    <c:if test="${page_Num == pageInfo.pageNum }">
                                        <li class="active"><a href="#">${page_Num }</a></li>
                                    </c:if>
                                    <c:if test="${page_Num != pageInfo.pageNum }">
                                        <li><a href="/articleCategoryManage/articleCategoryListByFirst?pn=${page_Num }">${page_Num }</a></li>
                                    </c:if>
                                </c:forEach>
                                <c:if test="${pageInfo.hasNextPage }">
                                    <li>
                                        <a href="/articleCategoryManage/articleCategoryListByFirst?pn=${pageInfo.pageNum+1}" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                                <li><a href="/articleCategoryManage/articleCategoryListByFirst?pn=${pageInfo.pages}">末页</a></li>
                            </ul>
                        </nav>
                        <!-- 分页条结束 -->
                    </div>
                </c:otherwise>
            </c:choose>
        </div>

        <%@include file="common/manage-foot.jsp" %>

    </div>
    <!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->


<%-- 新增 --%>
<div class="modal fade" id="addArticleCategoryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">文章分类</h4>
            </div>
            <div class="modal-body">
                <%-- 设置文章分类类型 --%>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">新增类型</label>
                        <div class="col-sm-10 text-center">
                            <label class="radio-inline">
                                <input type="radio" name="settingCategoryType" class="settingCategoryType" value="0"> 主分类
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="settingCategoryType" class="settingCategoryType" value="1"> 次分类
                            </label>
                        </div>
                    </div>
                </form>
                <form class="form-horizontal" id="articleCategoryFirstForm">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类标题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control articleCategoryTitle0">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10 text-center">
                            <label class="radio-inline">
                                <input type="radio" name="articleCategoryState" class="articleCategoryState0" value="0"> 启用
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="articleCategoryState" class="articleCategoryState0" value="1"> 禁用
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类图标</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control articleCategoryIcon0">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">简介</label>
                        <div class="col-sm-10">
                            <textarea class="form-control articleCategoryIntroduce0" rows="3"></textarea>
                        </div>
                    </div>
                </form>
                <form class="form-horizontal" id="articleCategorySecondForm">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">主分类</label>
                        <div class="col-sm-10 articleCategorySon">

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类标题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control articleCategoryTitle1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10 text-center">
                            <label class="radio-inline">
                                <input type="radio" name="articleCategoryState" class="articleCategoryState1" value="0"> 启用
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="articleCategoryState" class="articleCategoryState1" value="1"> 禁用
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类图标</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control articleCategoryIcon1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">简介</label>
                        <div class="col-sm-10">
                            <textarea class="form-control articleCategoryIntroduce1" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addArticleCategoryBtn">新增文章分类</button>
            </div>
        </div>
    </div>
</div>

<%-- 查看 --- 更新 --%>
<div class="modal fade" id="articleCategoryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">文章分类</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group hide">
                        <label class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control articleCategoryId">
                            <input type="text" class="form-control articleCategoryParentId">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类标题</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control articleCategoryTitle">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10 text-center">
                            <label class="radio-inline">
                                <input type="radio" name="articleCategoryState" class="articleCategoryState" value="0"> 启用
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="articleCategoryState" class="articleCategoryState" value="1"> 禁用
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类图标</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control articleCategoryIcon">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">简介</label>
                        <div class="col-sm-10">
                            <textarea class="form-control articleCategoryIntroduce" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateArticleCategoryBtn">更新文章分类</button>
            </div>
        </div>
    </div>
</div>

<%@include file="common/manage-scripts.jsp" %>

</body>

</html>